import React from 'react';
import { Divider, Row, Col, Radio, Button } from 'antd';
import { SketchPicker } from 'react-color';
import styles from "./Setting.less";
import config from "../../../../config/config";

const StyleTabPane = (props) => {

    const { themeColor, changeThemeColor, onChangeColor, defaultThemeColor } = props;

    return (
        <div style={{ padding: "8px 20px 0px 10px", display: "block" }}>
            <i className="ri-t-shirt-line" style={{ padding: "0px 10px 0px 0px" }} />主题颜色
            <Divider />
            <Row>
                <Col span={3}><i className="ri-list-settings-line" style={{ padding: "0px 10px 0px 0px" }} />预制</Col>
                <Col span={21}>
                    <Radio.Group value={themeColor} onChange={changeThemeColor} className={styles.setting_color_radio_list}>
                        {
                            config.theme_color.map(item => <Radio value={item.value} style={{ padding: "0px 0px 20px 0px" }}>
                                <span style={{ color: item.value, border: "1px solid " + item.value, padding: "5px 10px 5px 10px", borderRadius: "15px" }}>{item.name}</span>
                            </Radio>)
                        }
                    </Radio.Group>
                </Col>
            </Row>
            <Row style={{ padding: "10px 0px 20px 0px" }}>
                <Col span={3}><i className="ri-edit-box-line" style={{ padding: "0px 10px 0px 0px" }} />自定义</Col>
                <Col span={16} style={{ textAlign: "center" }} className={styles.setting_sketch_picker}>
                    <SketchPicker style={{ width: "300px", marginBottom: "15px" }} color={themeColor} onChangeComplete={(e) => onChangeColor(e.hex)} />
                </Col>
            </Row>
            <Row style={{ padding: "10px 0px 0px 0px" }}>
                <Col span={3}><i className="ri-save-3-line" style={{ padding: "0px 10px 0px 0px" }} />默认</Col>
                <Col span={16}>
                    <Button style={{ background: themeColor, width: "320px" }} onClick={() => defaultThemeColor()}>
                        <i className="ri-save-3-line" style={{ padding: "0px 10px 0px 0px" }} />恢复默认
                    </Button>
                </Col>
            </Row>
        </div>
    );
}

export default StyleTabPane;
